<template>
    <div>
        <a-modal
            v-model:visible="visible"
            ok-text="确认"
            cancel-text="取消"
            @ok="handleOk"
            width="600px"
        >
        <template #footer>
            <a-button key="submit" type="primary" @click="handleCancelClick" class="btn">取消</a-button>
            <a-button key="submit" type="primary" @click="onSubmit" class="sub-btn">确定</a-button>
        </template>
            <a-row>
                <a-col :span="12"><span class="span-top">专业名称：{{ props.majorName }}</span></a-col>
                <a-col :span="12"><span class="span-top">科室名称：{{ props.departmentName }}</span></a-col>
            </a-row>
        <!-- <a-row> -->
                <a-form :modal="modalRef">
                        <a-form-item label="绝缘工具名称："  :style="{marginTop:25+'px'}" required>
                            <template v-if="flag === 'edit'">
                                <a-input v-model:value="modalRef.name" />
                            </template>
                            <template v-else>
                                <a-select
                                    v-model:value="modalRef.name"
                                    show-search
                                    placeholder=" "
                                    style="width: 150px"
                                    :options="toolList"
                                    :filter-option="filterOption"
                                    @focus="handleFocus"
                                    @blur="handleBlur"
                                    @change="handleChange"
                                >
                                </a-select>
                                <!-- <a-input v-model:value="modalRef.name" /> -->
                            </template>
                           
                        </a-form-item>
                    
                    <h3 :style="{marginBottom:20+'px',fontWeight:700}">电气试验标准</h3>
                    <a-form-item label="工作电压（kv):" required>
                        <a-input-number id="inputNumber" v-model:value="modalRef.workingVoltage"/>
                    </a-form-item>
                    <h3 :style="{marginBottom:20+'px',fontWeight:600}">交流试验电压</h3>
                    <a-form-item label="试验电压（kv):" required>
                        <a-input-number id="inputNumber" v-model:value="modalRef.testingVoltage"/>
                    </a-form-item>
                    <a-form-item label="试验长度（m):" required>
                        <a-input-number id="inputNumber" v-model:value="modalRef.length" />
                    </a-form-item>
                    <a-form-item label="试验持续时间（分):" required>
                        <a-input-number id="inputNumber" v-model:value="modalRef.testDuration"/>
                    </a-form-item>
                    <a-form-item label="试验周期（月):" required>
                        <a-input-number id="inputNumber" v-model:value="modalRef.testPeriod"/>
                    </a-form-item>
                </a-form>        
                <a-form-item label="是否分节：" required>
                    <template v-if="flag === 'edit'">
                        <a-input v-model:value="modalRef.isMultisection" />
                    </template>
                    <template v-else>
                        <a-space>
                            <a-select ref="select" v-model:value="modalRef.isMultisection" style="width: 70px" @focus="focus" @change="handleChange">
                                <a-select-option value="false">否</a-select-option>
                                <a-select-option value="true">是</a-select-option>
                            </a-select>
                        </a-space>
                    </template>
                    
                </a-form-item>
                <a-form-item label="单位：" required>
                    <template v-if="flag === 'edit'">
                        <a-input v-model:value="modalRef.unit" />
                    </template>
                    <template v-else>
                        <a-space>
                        <a-select ref="select" v-model:value="modalRef.unit" style="width: 100px" @focus="focus" @change="handleChange">
                            <a-select-option value="个">个</a-select-option>
                            <a-select-option value="双">双</a-select-option>
                            <a-select-option value="节">节</a-select-option>
                        </a-select>
                        </a-space>
                    </template>
                </a-form-item>
                <a-form-item label="用途：" required>
                    <a-input v-model:value="modalRef.useage" />
                </a-form-item>
                <a-form-item label="备注：" required>
                    <a-textarea
                    v-model:value="modalRef.tips"
                    placeholder=""
                    :auto-size="{ minRows: 5, maxRows: 5 }"
                    />
                </a-form-item>
            <!-- </a-col> -->
        <!-- </a-row> -->
        </a-modal>
    </div>
</template>

<script setup>
import { ref, reactive, computed,toRaw,onMounted } from 'vue';
import { Form } from 'ant-design-vue'
import { toArray } from 'lodash-es'
import request from '@/utils/request'
// import { string } from 'vue-types';
// import { EditFilled } from '@ant-design/icons-vue';

const emit = defineEmits(['loadData'])
const props = defineProps(['majorName','departmentName'])

const visible = ref(false);
const flag = ref('')
const editId = ref('')

const editData=ref()
// 绝缘工具的下拉列表
const toolList=ref([
    {
      value: '验电器',
      label: '验电器',
    }, {
      value: '110kv验电器',
      label: '110kv验电器',
    }, {
      value: '27.5kv验电器',
      label: '27.5kv验电器',
    }, {
      value: '10kv验电器',
      label: '10kv验电器',
    }, {
      value: '打杂杆',
      label: '打杂杆',
    }, {
      value: '令克棒',
      label: '令克棒',
    }, {
      value: '接地杆',
      label: '接地杆',
    }, {
      value: '绝缘手套',
      label: '绝缘手套',
    }, {
      value: '绝缘靴',
      label: '绝缘靴',
    }, {
      value: '打冰杆',
      label: '打冰杆',
    }, {
      value: '等电位杆',
      label: '等电位杆',
    }, {
      value: '绝缘测杆',
      label: '绝缘测杆',
    }, {
      value: '绝缘操作手柄',
      label: '绝缘操作手柄',
    },
])

//下拉框
const handleChange = value => {
    console.log(`selected ${value}`);
};
const handleBlur = () => {};
const handleFocus = () => {};
const filterOption = (input, option) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

onMounted(async()=>{
    let result = await request.get('/api/quota/optionalTools')
    result.data.data.map(item => {
        let obj = {
            value: item.name,
            label: item.name,
        }
        toolList.value.push(obj);
    });
})

// const data = reactive({
//     name: '',
//     workingVoltage: '',
//     testingVoltage: '',
//     length:'',
//     testDuration:'',
//     testPeriod:'',
//     isMultisection:'',
//     unit:'',
//     useage:'',
//     tips:'',
// })

const modalRef = reactive({
    name: '',
    workingVoltage: '',
    testingVoltage: '',
    length:'',
    testDuration:'',
    testPeriod:'',
    isMultisection:'',
    unit:'',
    useage:'',
    tips:'',
})

const rulesRef = reactive({
    name: [{
        required: true,
        message: 'Please input name',
    }],
    workingVoltage: [{
        required: true,
        message: 'Please input workingVoltage',
    }],
    testingVoltage: [{
        required: true,
        message: 'Please input testingVoltage',
    }],
    length: [{
        required: true,
        message: 'Please input length',
    }],
    testDuration: [{
        required: true,
        message: 'Please input testDuration',
    }],
    testPeriod: [{
        required: true,
        message: 'Please input testPeriod',
    }],
    unit: [{
        required: true,
        message: 'Please input unit',
    }],
    useage: [{
        required: true,
        message: 'Please input useage',
    }],
    tips: [{
        required: true,
        message: 'Please input tips',
    }],
})

const useForm = Form.useForm

const { validate, validateInfos, mergeValidateInfo } = useForm(modalRef, rulesRef)

//点击取消按钮
const handleCancelClick = () =>{
        visible.value = false    
}

//点击确定按钮
const onSubmit = () => {
    validate().then(() => {
        if(flag.value === 'edit'){
            // console.log(editData.value)
            editData.value.name = modalRef.name
            editData.value.workingVoltage = modalRef.workingVoltage
            editData.value.testingVoltage = modalRef.testingVoltage
            editData.value.length = modalRef.length
            editData.value.testDuration = modalRef.testDuration
            editData.value.testPeriod = modalRef.testPeriod
            // editData.value.isMultisection=modalRef.isMultisection
            editData.value.unit = modalRef.unit
            editData.value.useage = modalRef.useage
            editData.value.tips = modalRef.tips
            request({
                url:'/category/edit',
                method:'post',
                data:editData.value
            })
            .then((res) => {
                visible.value = false
                emit('loadData')
            })
        }else{
                // GdInfoApi.addBasicInfo({...toRaw(modalRef)})
                console.log(11111)
                request({
                    url:'/category/add',
                    method:'post',
                    data:{
                      name: modalRef.name,
                      workingVoltage: modalRef.workingVoltage,
                      testingVoltage: modalRef.testingVoltage,
                      length: modalRef.length,
                      testDuration: modalRef.testDuration,
                      testPeriod: modalRef.testPeriod,
                      unit:modalRef.unit,
                      useage: modalRef.useage,
                      tips: modalRef.tips,
                    //   speciality: modalRef.speciality
                      speciality: null
                        
                    }
                })
                .then((res) => {
                visible.value = false
                emit('loadData')
                })
            }
            }).catch(err => {
                console.log('error', err);
            });
        };
const errorInfos = computed(() => {
  return mergeValidateInfo(toArray(validateInfos));
})

// watchEffect(() => {
//     console.log(flag.value);
// });

const showModal = (params) => {
    // console.log(params)
    editData.value=params.rec
    const {type,rec}=params
    console.log(type)
    flag.value=type
    visible.value = true;
    editId.value = rec.id

    modalRef.name = rec.name
    modalRef.workingVoltage = rec.workingVoltage
    modalRef.testingVoltage = rec.testingVoltage
    modalRef.length = rec.length
    modalRef.testDuration = rec.testDuration
    modalRef.testPeriod = rec.testPeriod
    // modalRef.isMultisection=rec.isMultisection
    modalRef.unit = rec.unit
    modalRef.useage = rec.useage
    modalRef.tips = rec.tips
    if(rec.isMultisection===0){
        modalRef.isMultisection='是'
    }else{
        modalRef.isMultisection='否'
    }
};


const handleOk = () => {
    visible.value = false;
};

const focus = () => {};

defineExpose({
  showModal,
})

</script>

<style lang="less" scoped>
.span-top{
    font-weight: 900;
    margin-bottom: 10px;
    height: 50px;
    font-size: 20px;
}

.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
.ant-form-item-label>label {
     font-size: 20px;
 }
 /deep/ .ant-input,.ant-input-number,.ant-select{
    width: 150px;
  }
/deep/.ant-form-item-label > label{
    width: 150px;
    justify-content: flex-end;
}
.sub-btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 80px;
      padding: 0;
  }    
  .btn{
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: #292929;
      height: 38px;
      width: 80px;
      padding: 0;
  } 
</style>